﻿<MudPopoverProvider />
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Start))">Start</MudButton>

<MudDrawer @bind-Open="@_open" Anchor="@_anchor" Elevation="1" Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">My App</MudText>
    </MudDrawerHeader>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">Open</MudButton>
    <MudPopover Open="@_isOpen" Fixed="true" Class="px-4 pt-4">
        <MudSelect @bind-Value="@_selectedValue">
            <MudSelectItem Value="@("Item 1")">Item 1</MudSelectItem>
            <MudSelectItem Value="@("Item 2")">Item 2</MudSelectItem>
            <MudSelectItem Value="@("Item 3")">Item 3</MudSelectItem>
        </MudSelect>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
    </MudPopover>
</MudDrawer>

<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer2(Anchor.End))">Open Drawer</MudButton>

<MudDrawer @bind-Open="@_open2" Width="@_width" Height="@_height" Anchor="@_anchor2" Elevation="1" Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">My App</MudText>
    </MudDrawerHeader>
    <MudGrid>
        <MudItem xs="12" md="12">
            <MudSelect T="string" Label="US States" HelperText="Pick your favorite states"
                       MultiSelection="true" @bind-Value="_value" @bind-SelectedValues="_options">
                @foreach (var state in _states)
                {
                    <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
                }
            </MudSelect>
        </MudItem>
        <MudItem xs="12" md="6">
            <MudText Typo="Typo.body2">MudSelect.Value: "@_value"</MudText>
        </MudItem>
        <MudItem xs="12" md="6">
            <MudText Typo="Typo.body2">MudSelect.SelectedValues: HashSet&lt;string&gt; { @(string.Join(", ", _options.Select(x => $"\"{x}\""))) }</MudText>
        </MudItem>
    </MudGrid>
</MudDrawer>

@code {
    public static string __description__ = "Popover from Drawer with Child Select";

    private bool _isOpen;
    private bool _open;
    private bool _open2;
    private Anchor _anchor;
    private Anchor _anchor2;
    private string? _width;
    private string? _height;
    private string _selectedValue = string.Empty;
    private string _value = "Nothing selected";
    private IEnumerable<string> _options = new HashSet<string> { "Alaska" };
    private readonly string[] _states =
    [
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming"
    ];

    private void ToggleOpen()
    {
        _isOpen = !_isOpen;
    }

    private void OpenDrawer(Anchor anchor)
    {
        _open = true;
        _anchor = anchor;
    }

    private void OpenDrawer2(Anchor anchor)
    {
        _open2 = true;
        _anchor2 = anchor;

        switch (_anchor2)
        {
            case Anchor.Start:
                _width = "300px";
                _height = "100%";
                break;
            case Anchor.End:
                _width = "400px";
                _height = "100%";
                break;
            case Anchor.Bottom:
                _width = "100%";
                _height = "200px";
                break;
            case Anchor.Top:
                _width = "100%";
                _height = "350px";
                break;
        }
    }
}
